<template>
  <div class="video-preview-container">
    <el-card>
      <video
        ref="videoPlayer"
        :src="videoSrc"
        controls
        class="video-player"
      ></video>
      <div slot="footer" class="card-footer">
        <el-button @click="playVideo">播放</el-button>
        <el-button @click="pauseVideo">暂停</el-button>
        <el-button @click="stopVideo">停止</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'VideoPreview',
  props: {
    videoSrc: {
      type: String,
      required: true,
    },
  },
  methods: {
    playVideo() {
      this.$refs.videoPlayer.play();
    },
    pauseVideo() {
      this.$refs.videoPlayer.pause();
    },
    stopVideo() {
      this.$refs.videoPlayer.pause();
      this.$refs.videoPlayer.currentTime = 0;
    },
  },
};
</script>

<style scoped>
.video-preview-container {
  max-width: 600px;
  margin: 0 auto;
}

.video-player {
  width: 100%;
  height: auto;
}

.card-footer {
  display: flex;
  justify-content: space-around;
}
</style>
